<template>
    <div class="like_container">
        <div class="like_list">
            <div class="list_item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
                <div class="img"><van-image width="100" radius="6" height="100"
                        :src="`https://imagev2.xmcdn.com/${item.albumCoverPath}`" fit="cover"></van-image>
                </div>
                <div class="content">
                    <div class="title">{{ item.albumUserNickName }}</div>
                    <div class="desc">{{ item.intro }}</div>
                    <div class="info">
                        <span class="left"> <van-icon name="music-o" /> {{ item.albumTrackCount }}</span>
                        <span class="right"><van-icon name="service-o" />{{ item.albumPlayCount }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { type albumsModel } from '@/api/index'
import { useRouter } from 'vue-router'
const Router = useRouter()
defineProps<{
    list: albumsModel[]
}>()
const toDetail = (item) => {
    Router.push(`/coursedetail?id=${item.albumId}&anchorId=${item.anchorId}&title=${item.albumUserNickName}`)
}
</script>

<style lang="less" scoped>
.like_container {
    .like_list {
        padding-left: 10px;

        .list_item {
            display: flex;
            width: 100%;
            margin-bottom: 20px;

            .img {
                width: 30%;
            }

            .content {
                // padding: 10px;
                width: 60%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-wrap: normal;
                    font-size: 16px;
                }

                .desc {
                    width: 100%;

                    color: #999999;
                    font-size: 12px;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }

                .info {
                    margin-bottom: 10px;
                    color: #999999;
                    font-size: 12px;

                    .left {
                        margin-right: 20px;
                    }

                }
            }
        }
    }
}
</style>